<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-button class="margin-right" type="text" icon="el-icon-refresh" @click="reloadAllConnects" />

        <el-select v-model="connParam.connName" size="small" @change="switchConnect">
          <el-option v-for="connect in connects" :key="connect" :value="connect" :label="connect" />
        </el-select>
        <el-select v-model="connParam.index" size="small" style="width: 60px" @change="switchIndex">
          <el-option v-for="db in dbs" :key="db" :value="db" :label="db" />
        </el-select>

        <el-button type="text" size="small" icon="el-icon-refresh"  @click="rebuildConnect">重建连接</el-button>
        <el-button type="text" size="small" icon="el-icon-delete" @click="flushdb">清空库</el-button>
        <el-button type="text" size="small" icon="el-icon-delete" @click="flushall">清空所有数据</el-button>

      </el-col>
    </el-row>

    <el-tabs :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane name="dashboard" label="监控总览">
        <dashboard ref="dashboard" :conn-param="connParam" @onConnInfoChange="changeDbs" />
      </el-tab-pane>
      <el-tab-pane name="keyscan" label="数据查询">
        <keyscan ref="keyscan" :conn-param="connParam" />
      </el-tab-pane>
      <el-tab-pane name="treekey" label="树形KEY">
        <treekey ref="treekey" :conn-param="connParam" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dashboard from '@/views/monitor/redis/dashboard'
import keyscan from '@/views/monitor/redis/keyscan'
import treekey from '@/views/monitor/redis/treekey'

import core from '@/api/core'
import redis from '@/api/redis'
import { formatTime } from '@/utils'

export default {
  name: 'RedisMain',
  components: { dashboard, keyscan, treekey },
  data() {
    return {
      connParam: {
        connName: null,
        index: 0
      },
      connects: [],
      tabs: {
        activeTabName: 'keyscan'
      },
      dbs: [0]
    }
  },
  computed: {

  },
  mounted() {
    this.reloadAllConnects()
  },
  methods: {
    rebuildConnect(){
      redis.rebuildConnect(this.connParam).then(res => {
        this.$message({type: 'success',message: '连接重建成功, 刷新页面后查看'})
      })
    },
    flushdb() {
      this.$confirm('确定要清空 '+this.connParam.index+' 库吗? 这将导致本库所有数据丢失(flushdb)', '警告', { type: 'warning' }).then(() => {
        redis.flushdb(this.connParam).then(res => {
          this.$message({ type: 'success', message: '清空库 '+ this.connParam.index + ' 成功'})
          this.switchTab({ name: this.tabs.activeTabName })
        })
      }).catch(() => {})
    },
    flushall() {
      this.$confirm('确定要清空吗? 这将导致所有数据丢失(flushall)', '警告', { type: 'warning' }).then(() => {
        redis.flushall(this.connParam).then(res => {
          this.$message({ type: 'success', message: '清空所有数据成功'})
          this.switchTab({ name: this.tabs.activeTabName })
        })
      }).catch(() => {})

    },
    changeDbs(connInfo) {
      // this.dbs = connInfo.redisRunMode;
      if (!connInfo) {
        this.dbs = [0]
        return
      }
      if (connInfo.redisRunMode === 'cluster') {
        this.dbs = [0]
      }
      if (connInfo.masterNodes.length === 0) {
        this.dbs = [0]
      }

      const masterNode = connInfo.masterNodes[0]

      const array = []
      for (let i = 0; i < masterNode.dbs; i++) {
        array.push(i)
      }
      this.dbs = array
    },
    reloadAllConnects() {
      core.security.moduleConnectNames('redis').then(res => {
        this.connects = res.data
        if (this.connects && this.connects.length > 0) {
          this.switchConnect(this.connects[0])
        }
      })
    },
    switchIndex(index) {
      this.connParam.index = index
      if (this.$refs[this.tabs.activeTabName]) {
        this.$refs[this.tabs.activeTabName].init()
      }
    },
    switchConnect(connect) {
      this.connParam.connName = connect
      // 初始化 index 为 0 , 这对于集群模式和单机模式都适合
      this.connParam.index = 0

      // 初始化加载默认 tab
      this.switchTab({ name: this.tabs.activeTabName })
      if (this.tabs.activeTabName !== 'dashboard') {
        // 必须加载 dashboard
        this.$refs.dashboard.init()
      }
    },
    switchTab(tab, event) {
      this.tabs.activeTabName = tab.name
      this.$nextTick(() => {
        this.$refs[tab.name].init()
      })
    }
  }
}
</script>


